<template>
  <span>
    <template v-for="(item, index) in selectedItems">
      <Tag v-if="showStyle" :color="item['cssType'] == null || item['cssType'] =='' ? 'default':item['cssType']">{{item.itemName}}</Tag>
      <span v-else>{{item.itemName}}</span>
      <span v-if="index < selectedItems.length - 1">,</span>
    </template>
  </span>
</template>
<script>
  import { toStringArray } from '@/libs/renderUtil.js'
  import constants from '@/constants/constants'

  var _ = require('underscore')

  export default {
    name: 'DictLabel',
    props: {
      value: {
        type: [String, Number, Array, Boolean],
        default: ''
      },
      kind: {
        type: String,
        default: ''
      },
      pid: {
        type: String,
        default: ''
      },
      defValue: {
        type: String,
        default: null
      },
      defDesc: {
        type: String,
        default: ''
      },
      showStyle: {
        type: Boolean,
        default: false
      },
      localDictItems: {
        type: Array,
        default: null
      }
    },
    data () {
      var itemVals = toStringArray(this.value)
      if (itemVals.length === 0) {
        if (this.defValue !== null && this.defValue !== '') {
          itemVals.push(this.defValue)
        }
      }
      return {
        itemValues: itemVals,
        dictMap: null,
        selectedItems: []
      }
    },
    watch: {
      value () {
        this.itemValues = this.buildVals(this.value)
        if (this.dictMap !== undefined && this.dictMap !== null) {
          this.selectedItems = toSelectedDictItem(this.itemValues, this.dictMap, this.defDesc)
        }
      },
      dictMap: function (newDictMap) {
        var _this = this
        if (!_this) {
          return
        }
        if (newDictMap === null) {
          this.selectedItems = []
          return
        }
        this.selectedItems = toSelectedDictItem(_this['itemValues'], newDictMap, this.defDesc)
      }
    },
    mounted () {
      let _this = this
      if (this.localDictItems !== null && this.localDictItems.length > 0) {
        _this.loadDict(this.localDictItems)
        return
      }
      if (this.kind === null || this.kind === '') {
        return
      }
      let key = this.kind
      if (this.pid !== '') {
        key = this.kind + '_' + this.pid
      }
      if (this.$store !== null && this.$store !== undefined) {
        let promise = this.$store.dispatch(constants.types.LOAD_DICT_INFO, { kind: key })
        promise.then((data) => {
          _this.loadDict(data)
        })
      }
    },
    methods: {
      buildVals (val) {
        let vals = toStringArray(val)
        if (vals.length === 0) {
          if (this.defValue != null && this.defValue !== '') {
            vals.push(this.defValue)
          }
        }
        return vals
      },
      loadDict: function (dictList) {
        let obj = {}
        dictList.forEach((item) => {
          obj[item.itemKey] = item
        })
        this.dictMap = obj
      }
    }
  }

  function toSelectedDictItem (values, dictMap, defDesc) {
    var selectDictItems = []
    _.each(values, function (item) {
      var dict = dictMap[item]
      if (dict) {
        selectDictItems.push(dict)
      } else {
        if (defDesc) {
          selectDictItems.push({ itemKey: item, itemName: defDesc })
        }
      }
    })
    return selectDictItems
  }
</script>
